import Taro, { Component, Config } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import { namespace } from '../../models/page-recommend'
import MpPage from '../mp-page/index'
import PostItem from '../post-item'
import './index.less'

interface IProps {
  state: number
  items: []
  topItems: []
  count: number
}

interface IState {}
class Index extends Component<IProps> {
  async componentDidMount() {
    await this.props.dispatch({
      type: `${namespace}/init`
    })
  }
  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  loadData = async (direction: number) => {
    await this.props.dispatch({
      type: `${namespace}/loadData`,
      payload: {
        direction: direction
      }
    })
  }
  onRetry = async () => {
    await this.props.dispatch({
      type: `${namespace}/init`
    })
  }
  onRefresh = async () => {
    // await this.loadData(0)
    await this.props.dispatch({
      type: `${namespace}/loadData`,
      payload: {
        direction: 0
      }
    })
    this.$refs.list.hideRefresh()
  }
  onScrolltolower = async () => {
    await this.props.dispatch({
      type: `${namespace}/loadData`,
      payload: {
        direction: 1
      }
    })
    // await this.loadData(1)
  }

  render() {
    const { count, state, topItems, items } = this.props
    return (
      <MpPage
        enableRefresh
        ref={this.list}
        count={count}
        state={state}
        onScrolltolower={this.onScrolltolower}
        onRetry={this.onRetry}
        onRefresh={this.onRefresh}
      >
        {topItems.map((item) => {
          return <PostItem key={item.id} item={item} isTop />
        })}
        {items.map((item) => {
          return <PostItem key={item.id} item={item} showBtnFollow={false} />
        })}
      </MpPage>
    )
  }
}
const mapStateToProps = (models) => {
  return {
    ...models[namespace]
  }
}
export default connect(mapStateToProps)(Index)
